<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
    <head>
        <th:block th:include="include :: head('使用外部文本')" />
    </head>
    <body>
        <div id="searchArea" class="collapse in"  style="margin-top: 15px;">
            <form id="searchForm">

                <div class="form-row">

                    <div class="col-auto">
                        <input name="intgt" type="text" class="form-control" placeholder="大于数字">
                    </div>
                    <div class="col-auto">
                        <input name="intlt" type="text" class="form-control" placeholder="小于数字">
                    </div>
                    <div class="col-auto">
                        <input id="startTime" name="beginTime" type="text" class="form-control select-time" placeholder="开始时间">
                    </div>
                    <div class="col-auto">
                        <input id="endTime" name="endTime" type="text" class="form-control select-time" placeholder="截止时间">
                    </div>
                    <div class="col-auto">
                        <input name="searchTxt" type="text" class="form-control" placeholder="字符串字段">
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-primary mb-2" onclick="SampleTable.table.search();"><i class="fas fa-eye"></i>查询</button>
                        <button type="button" class="btn btn-info mb-2" onclick=" $('#searchForm')[0].reset();;"><i class="fas fa-broom"></i>清空</button>
                    </div>
                </div>
            </form>
        </div>
        <div id="tableToolbar">
            <div class="form-inline " role="form">
                <button type="button" class="btn btn-outline-success"  data-toggle="tooltip"   title="新建" onclick="SampleTable.table.add();"><i class="fas fa-file-alt"></i></button>
                <button type="button" class="btn btn-outline-warning" data-toggle="tooltip"   title="修改"  onclick="SampleTable.table.edit();"><i class="fas fa-pencil-alt "></i></button>
                <button type="button" class="btn btn-outline-danger" data-toggle="tooltip"     title="删除" onclick="SampleTable.table.delete();"><i class="fas fa-trash-alt "></i></button>

                <div class="form-group">
                    <input id="searchKeyWord" name="searchKeyWord" class="form-control" type="text" min="2" minlength="2" placeholder="全文检索">
                </div>
                <button  type="button" class="btn btn-outline-secondary"  data-toggle="tooltip"   title="查询" onclick="SampleTable.table.fullTextSearch();"><i class="fas fa-search "></i></button>
                <button id="searchMore"  type="button" class="btn btn-outline-danger"  data-toggle="tooltip" title="更多查询" onclick='$("#searchArea").collapse("toggle");'>
                    <!--<i class="fab fa-searchengin fa-1x" ></i>-->
                    <i class="fas fa-pastafarianism fa-1x" ></i>
                </button>
            </div>  

        </div>


        <table id="table">      </table>

        <div th:replace="include :: footer"></div>

        <script>
            var profix = '/singleTable';
            var baseUrl = profix + "/list";
            //var fullTextUrl = profix + "/fullTextList";
            var SampleTable = {
                id: "table",
                funProps: {
                    profixTitle: "单表样例",
                    url: baseUrl,
                    fullTextUrl: profix + "/fullTextList",
                    addUrl: profix + "/add",
                    editUrl: profix + "/edit/",
                    delUrl: profix + "/delete",
                    unDelUrl: profix + "/undelete",
                },
                initColumn: function () {
                    var columns = [
                        {checkbox: "true"},
                        {field: 'id', title: 'ID', sortable: true},
                        {field: 'intField', title: '整形字段', sortable: true},
                        {field: 'varcharField', title: '字符串字段', sortable: true, formatter: highlightSearchText},
                        {field: 'dateField', title: '日期字段', sortable: true},
                        {field: 'selectDictField', title: '下拉单选字段', sortable: true},
                        {field: 'multiSelectField', title: '下拉多选字段', sortable: true},
                        {field: 'checkDictField', title: 'CHECK字段', sortable: true},
                        {field: 'redioDictField', title: 'REDIO字段', sortable: true},
                        {field: 'delFlag', title: '删除标识', sortable: true},
                        {title: '操作', align: 'center',
                            formatter: function (value, row, index) {
                                var actions = [];
                                actions.push('<a class="btn btn-success btn-xs " href="#"  title="修改"  onclick="SampleTable.table.edit(\'' + row.id + '\')"><i class="fas fa-pencil-alt "></i></a> ');
                                if (row.delFlag === 0)
                                    actions.push('<a class="btn btn-danger btn-xs " href="#"  title="删除"  onclick="SampleTable.table.delete(\'' + row.id + '\')"><i class="fas fa-trash-alt "></i></a> ');
                                else
                                    actions.push('<a class="btn btn-info btn-xs " href="#"  title="恢复"  onclick="SampleTable.table.undelete(\'' + row.id + '\')"><i class="fas fa-undo "></i></a> ');
                                return actions.join('');
                            }}
                    ];
                    return columns;
                },
                options: {
                    queryParams: function (params) {
                        var queryData = {};
                        if (this.url === baseUrl)
                            $.each($("#searchForm").serializeArray(), function (i, field) {
                                queryData[field.name] = field.value;
                            });
                        else
                            queryData['keyWords'] = $('#searchKeyWord').val();
                        params = $.extend(params, queryData);
                        return params;
                    }
                }};

            $(document).ready(function () {
                var table = new BTable(SampleTable.id, SampleTable.initColumn(), SampleTable.options);
                SampleTable.table = table.init(SampleTable.funProps);
            });
            function highlightSearchText(value) {
                var kw = $("#searchKeyWord").val();
                if (kw) {
                    var rp = "<span class='bg-danger text-white'>" + kw + "</span>";
                    value = value.replace(kw, rp);
                }
                return value;
            }
        </script>

    </body>
</html>